<template>
    <div class="app-container" >


        <el-form :inline="true" :model="queryForm" >



        






                  <el-form-item  v-if="$has('username')" label="账号" >
                         <el-input v-model="queryForm.username" ></el-input>
                  </el-form-item>





                  <el-form-item  v-if="$has('nickname')" label="昵称" >
                         <el-input v-model="queryForm.nickname" ></el-input>
                  </el-form-item>





                  <el-form-item  v-if="$has('email')" label="邮箱" >
                         <el-input v-model="queryForm.email" ></el-input>
                  </el-form-item>





                  <el-form-item  v-if="$has('phoneNumber')" label="手机" >
                         <el-input v-model="queryForm.phoneNumber" ></el-input>
                  </el-form-item>





                  <el-form-item  v-if="$has('sex')" label="性别" >
                         <el-input v-model="queryForm.sex" ></el-input>
                  </el-form-item>





                  <el-form-item  v-if="$has('avatar')" label="头像" >
                         <el-input v-model="queryForm.avatar" ></el-input>
                  </el-form-item>





                  <el-form-item  v-if="$has('password')" label="密码" >
                         <el-input v-model="queryForm.password" ></el-input>
                  </el-form-item>





                  <el-form-item  v-if="$has('salt')" label="盐" >
                         <el-input v-model="queryForm.salt" ></el-input>
                  </el-form-item>





                  <el-form-item  v-if="$has('loginIp')" label="登录ip" >
                         <el-input v-model="queryForm.loginIp" ></el-input>
                  </el-form-item>





                  <el-form-item  v-if="$has('loginDate')" label="登录时间" >
                         <el-input v-model="queryForm.loginDate" ></el-input>
                  </el-form-item>





                  <el-form-item  v-if="$has('sysDeptId')" label="部门id" >
                         <el-input v-model="queryForm.sysDeptId" ></el-input>
                  </el-form-item>





                  <el-form-item  v-if="$has('sysRoleIds')" label="角色集合" >
                         <el-input v-model="queryForm.sysRoleIds" ></el-input>
                  </el-form-item>

















                  <el-form-item  v-if="$has('status')" label="状态" >
                         <el-input v-model="queryForm.status" ></el-input>
                  </el-form-item>





                  <el-form-item  v-if="$has('data')" label="" >
                         <el-input v-model="queryForm.data" ></el-input>
                  </el-form-item>





                  <el-form-item  v-if="$has('loginTime')" label="" >
                         <el-input v-model="queryForm.loginTime" ></el-input>
                  </el-form-item>






        </el-form>

        <div class="l_right">
            <el-button      v-if="$has('page')" @click="search" class="l_button" type="primary" size="small" >
                查询
            </el-button>
            <el-button  v-if="$has('saveOne')"  @click="startSave({})" class="l_button" type="success"  size="small">
                添加
            </el-button>
            <el-button v-if="$has('saveOne')" @click="nextSave" :disabled="selectRows.length  == 0" class="l_button"  type="info" size="small">
                批量编辑
            </el-button>
            <el-button v-if="$has('deleteByIdIn')" @click="deleteByIdIn" :disabled="selectRows.length  == 0"  class="l_button"  type="warning" size="small">
                批量删除
            </el-button>

        </div>
        <div class="l_right">
            <LdElement></LdElement>
        </div>



        <el-table
                :data="list"
                border
                stripe
                @selection-change="handleSelectionChange"
                ref="dataTable"
                style="width: 100%">
            <el-table-column
                    prop="selection"

                    label="多选"
                    type="selection"
                    width="60">
            </el-table-column>
            <el-table-column
                    type="index"
                    label="#"
                    prop="index"

                    width="60">
            </el-table-column>













        <el-table-column
                prop="username"
                v-if="$has('username')"
                label="账号">

        </el-table-column>








        <el-table-column
                prop="nickname"
                v-if="$has('nickname')"
                label="昵称">

        </el-table-column>








        <el-table-column
                prop="email"
                v-if="$has('email')"
                label="邮箱">

        </el-table-column>








        <el-table-column
                prop="phoneNumber"
                v-if="$has('phoneNumber')"
                label="手机">

        </el-table-column>








        <el-table-column
                prop="sex"
                v-if="$has('sex')"
                label="性别">

        </el-table-column>








        <el-table-column
                prop="avatar"
                v-if="$has('avatar')"
                label="头像">

        </el-table-column>








        <el-table-column
                prop="password"
                v-if="$has('password')"
                label="密码">

        </el-table-column>








        <el-table-column
                prop="salt"
                v-if="$has('salt')"
                label="盐">

        </el-table-column>








        <el-table-column
                prop="loginIp"
                v-if="$has('loginIp')"
                label="登录ip">

        </el-table-column>








        <el-table-column
                prop="loginDate"
                v-if="$has('loginDate')"
                label="登录时间">

        </el-table-column>








        <el-table-column
                prop="sysDeptId"
                v-if="$has('sysDeptId')"
                label="部门id">

        </el-table-column>








        <el-table-column
                prop="sysRoleIds"
                v-if="$has('sysRoleIds')"
                label="角色集合">

        </el-table-column>




















        <el-table-column
                prop="status"
                v-if="$has('status')"
                label="状态">

        </el-table-column>








        <el-table-column
                prop="data"
                v-if="$has('data')"
                label="">

        </el-table-column>








        <el-table-column
                prop="loginTime"
                v-if="$has('loginTime')"
                label="">

        </el-table-column>







            <el-table-column


                    prop="crtTime"
                    label="创建时间"
                    sortable="custom"
            >
                <template slot-scope="{row}" >

                    {{row.crtTime | dateToString}}
                </template>
            </el-table-column>

            <el-table-column
                    prop="oper"
                    label="操作"
                    width="150"
                    v-if="$anyElement('saveOne','deleteByIdIn')"
            >
                <template slot-scope="{row}">
                    <el-button  v-if="$has('saveOne')" @click="startSave(row)" type="primary" size="small" >编辑</el-button>
                    <el-button  v-if="$has('deleteByIdIn')" @click="deleteById(row)" type="warning" size="small" >删除</el-button>

                </template>
            </el-table-column>
        </el-table>


        <div class="l_page" >
            <el-pagination
                    background
                    @size-change="page"
                    @current-change="page"
                    :current-page.sync="pageNumber"
                    :page-sizes="pageSizes"
                    :page-size.sync="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

        </div>



        <el-dialog
                title="编辑"
                :visible.sync="saveDialog"
                width="700px"
                :before-close="handleClose">
            <div>
                <el-form :rules="validRule" ref="saveForm" label-position="left" label-width="80px" :model="saveForm">












                    <el-form-item prop="username" label="账号" >
                        <el-input v-model="saveForm.username" ></el-input>
                    </el-form-item>








                    <el-form-item prop="nickname" label="昵称" >
                        <el-input v-model="saveForm.nickname" ></el-input>
                    </el-form-item>








                    <el-form-item prop="email" label="邮箱" >
                        <el-input v-model="saveForm.email" ></el-input>
                    </el-form-item>








                    <el-form-item prop="phoneNumber" label="手机" >
                        <el-input v-model="saveForm.phoneNumber" ></el-input>
                    </el-form-item>








                    <el-form-item prop="sex" label="性别" >
                        <el-input v-model="saveForm.sex" ></el-input>
                    </el-form-item>








                    <el-form-item prop="avatar" label="头像" >
                        <el-input v-model="saveForm.avatar" ></el-input>
                    </el-form-item>








                    <el-form-item prop="password" label="密码" >
                        <el-input v-model="saveForm.password" ></el-input>
                    </el-form-item>








                    <el-form-item prop="salt" label="盐" >
                        <el-input v-model="saveForm.salt" ></el-input>
                    </el-form-item>








                    <el-form-item prop="loginIp" label="登录ip" >
                        <el-input v-model="saveForm.loginIp" ></el-input>
                    </el-form-item>








                    <el-form-item prop="loginDate" label="登录时间" >
                        <el-input v-model="saveForm.loginDate" ></el-input>
                    </el-form-item>








                    <el-form-item prop="sysDeptId" label="部门id" >
                        <el-input v-model="saveForm.sysDeptId" ></el-input>
                    </el-form-item>








                    <el-form-item prop="sysRoleIds" label="角色集合" >
                        <el-input v-model="saveForm.sysRoleIds" ></el-input>
                    </el-form-item>




















                    <el-form-item prop="status" label="状态" >
                        <el-input v-model="saveForm.status" ></el-input>
                    </el-form-item>








                    <el-form-item prop="data" label="" >
                        <el-input v-model="saveForm.data" ></el-input>
                    </el-form-item>








                    <el-form-item prop="loginTime" label="" >
                        <el-input v-model="saveForm.loginTime" ></el-input>
                    </el-form-item>










                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="submitSave(false)">取 消</el-button>
    <el-button type="primary" @click="submitSave(true)">确 定</el-button>
  </span>
        </el-dialog>


    </div>
</template>

<script>
    import api from "../api/SysUserApi";

    import CrudTable from "@/views/common/CrudTable";
    export default {
        components:{

        },
        mixins:[CrudTable],
        data() {
            return {

                validRule:{

                            username: [
                                { required: true, message: '请输入', trigger: 'blur' }
                            ],
                            nickname: [
                                { required: true, message: '请输入', trigger: 'blur' }
                            ],
                            email: [
                                { required: true, message: '请输入', trigger: 'blur' }
                            ],
                            phoneNumber: [
                                { required: true, message: '请输入', trigger: 'blur' }
                            ],
                            sex: [
                                { required: true, message: '请输入', trigger: 'blur' }
                            ],
                            avatar: [
                                { required: true, message: '请输入', trigger: 'blur' }
                            ],
                            password: [
                                { required: true, message: '请输入', trigger: 'blur' }
                            ],
                            salt: [
                                { required: true, message: '请输入', trigger: 'blur' }
                            ],
                            loginIp: [
                                { required: true, message: '请输入', trigger: 'blur' }
                            ],
                            loginDate: [
                                { required: true, message: '请输入', trigger: 'blur' }
                            ],
                            sysDeptId: [
                                { required: true, message: '请输入', trigger: 'blur' }
                            ],
                            sysRoleIds: [
                                { required: true, message: '请输入', trigger: 'blur' }
                            ],
                            status: [
                                { required: true, message: '请输入', trigger: 'blur' }
                            ],
                            data: [
                                { required: true, message: '请输入', trigger: 'blur' }
                            ],
                            loginTime: [
                                { required: true, message: '请输入', trigger: 'blur' }
                            ],


        }



            };
        },
        mounted() {


            this.$nextTick(function () {
                this.init(api);
            })
        },
        methods: {
        }
    };
</script>


<style scoped>
    .l_page {
        text-align: center;
        margin: 15px 0px;
    }

    .l_right {
        margin: 10px 0px;
        display: flex;
        justify-content: flex-end;
    }
    .l_button {
        width: 100px;
    }
    .l_form_item{
        width: 49%;
    }
</style>
